<template>
    <div class="app-container">
        <el-form
            ref="queryParamsRef"
            :model="queryParams"
            label-position="left"
            label-width="auto"
        >

            <el-row>
                <el-col style="flex: 1 1 0;">
                    <el-row :gutter="16">
                        <el-col :span="8">
                            <el-row :gutter="24">
                                <el-col :span="15">
                                    <el-form-item label="被巡查单位：" prop="unitId">
                                        <DepartmentCascader v-model="queryParams.unitId" placeholder="请选择被巡查单位"
                                                            @change="getTableData"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="含下级：">
                                        <el-tooltip content="是否包含下级单位">
                                            <el-switch v-model="childUnitId" :disabled="!queryParams.unitId"
                                                       @change="childUnitIdSearchHandle"/>
                                        </el-tooltip>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查人：" prop="xcUserId">
                                <el-input v-model="queryParams.xcUserId" placeholder="请输入巡查人"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查时间：">
                                <el-date-picker
                                    v-model="searchTime"
                                    end-placeholder="截止时间"
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    type="daterange"
                                    unlink-panels
                                    value-format="YYYY-MM-DD"
                                    @change="changeDateTimerHandle"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查类型：" prop="xcType">
                                <el-select
                                    v-model="queryParams.xcType"
                                    clearable
                                    placeholder="请选择巡查类型"
                                    @change="getTableData"
                                >
                                    <el-option
                                        v-for="item in nj_xc_type"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查问题类型：" prop="njXcQuestionType">
                                <el-select
                                    v-model="queryParams.njXcQuestionType"
                                    clearable
                                    placeholder="请选择问题类型"
                                    @change="handleXcQuestionType"
                                >
                                    <el-option
                                        v-for="item in nj_xcquestion_type"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查问题：" prop="xcContentId">
                                <el-select
                                    v-model="queryParams.xcContentId"
                                    clearable
                                    placeholder="请选择巡查问题"
                                    @change="getTableData"
                                >
                                    <el-option
                                        v-for="item in xcQuestionTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                                <!--                                <el-input v-model="queryParams.value"/>-->
                            </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="8">-->
                        <!--                            <el-form-item label="状态：" prop="state">-->
                        <!--                                <el-select-->
                        <!--                                    v-model="queryParams.state"-->
                        <!--                                    placeholder="选择状态"-->
                        <!--                                    clearable-->
                        <!--                                    @change="getTableData"-->
                        <!--                                >-->
                        <!--                                    <el-option-->
                        <!--                                        v-for="item in nj_xcresult_state"-->
                        <!--                                        :key="item.value"-->
                        <!--                                        :label="item.label"-->
                        <!--                                        :value="item.value"-->
                        <!--                                    />-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                    </el-row>
                </el-col>
                <el-divider direction="vertical" style="height: 135px"/>
                <el-col style="flex: 0 0 86px;">
                    <el-form-item>
                        <el-button type="primary" @click="getTableData">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="exportHandleXlsx('巡查问题统计列表')">
                            <el-icon class="me-1">
                                <Download/>
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table
            ref="tableDataRef"
            v-loading="loading"
            :data="tableData"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip
            @sort-change="handleSortChange"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column :sort-orders="sortOrders" label="被巡查单位" prop="xcUnitName" sortable="xcUnitName"/>
            <el-table-column :sort-orders="sortOrders" label="巡查人" prop="xcUserName" sortable="xcUserName"/>
            <el-table-column :sort-orders="sortOrders" label="巡查时间起止" prop="xcDateTime" sortable="xcDateTime"/>
            <el-table-column :sort-orders="sortOrders" label="巡查类型" prop="xcTypeName" sortable="xcTypeName"/>
            <el-table-column :sort-orders="sortOrders" label="巡查问题类型" prop="njXcQuestionType"
                             sortable="njXcQuestionType"/>
            <el-table-column label="巡查问题" prop="xcContentName"/>
            <el-table-column label="状态" prop="stateText"/>
            <!--            <el-table-column label="操作">-->
            <!--                <template #default="scope">-->
            <!--                    <router-link-->
            <!--                        to="/OnlineCheck/artificialCheck"-->
            <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
            <!--                    >-->
            <!--                        详情-->
            <!--                    </router-link>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getTableData"
        />
    </div>
</template>

<script setup>

import {getCurrentInstance, useTemplateRef} from 'vue';
import DepartmentCascader from '@/components/DepartmentCascader/DepartmentCascader.vue';
import {getSendPoliceXcMainTableList} from '@/api/StatisticAnalysis/XCTotal.js';
import {useRoute} from 'vue-router';
import {exportHandleXlsx} from '@/utils/export.js';
import {Download} from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import {ContentList} from '@/api/videoApi/videoApi.js';
import PageEnum from '@/enum/PageEnum.js';
import useUserStore from '@/store/modules/user.js';

const {proxy} = getCurrentInstance();
const {
    nj_xcquestion_type,
    nj_xcquestion_option,
    nj_xcresult_state,
    nj_xc_type
} = proxy.useDict('nj_xcquestion_type', 'nj_xcquestion_option', 'nj_xcresult_state', 'nj_xc_type')

const userUnit = useUserStore().info.unitId;
const route = useRoute()
const {unitId, type, status, xcContentId} = route.query

const queryParamsRef = useTemplateRef('queryParamsRef');
const tableDataRef = useTemplateRef('tableDataRef')

const searchTime = ref(['', '']);
const childUnitId = ref(false)
const queryParams = ref({
    // 巡查单位
    unitId: Number(unitId) || userUnit || '',
    // 含下级单位
    childUnitId: '',
    // 巡查人
    xcUserId: '',
    // 巡查类型
    xcType: '',
    njXcQuestionType: type || '',
    // 巡查问题
    xcContentId: xcContentId || '',
    // 巡查状态
    state: '',
    res: '1',

    selChildren: false,
    params: {
        beginTime: '',
        endTime: ''
    }
});


const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'ascending',
    orderByColumn: 'xcUnitName'
})
const tableData = ref([]);
const defaultSort = ref({prop: 'xcUnitName', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])
const xcQuestionTypes = ref([])
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
onMounted(() => {
    if (status === '1') {
        searchTime.value = [
            dayjs().format('YYYY-01-01'),
            dayjs().format('YYYY-MM-DD'),
        ]
        queryParams.value.params.beginTime = searchTime.value[0];
        queryParams.value.params.endTime = searchTime.value[1];
    } else if (status === '0') {
        searchTime.value = [
            dayjs().format('YYYY-MM-DD'),
            dayjs().format('YYYY-MM-DD'),
        ]
        queryParams.value.params.beginTime = searchTime.value[0];
        queryParams.value.params.endTime = searchTime.value[1];
    }
    getXcQuestionList(queryParams.value.njXcQuestionType)
    getTableData()
})


const childUnitIdSearchHandle = (e) => {
    queryParams.value.childUnitId = e ? queryParams.value.unitId : '';
    getTableData()
}

/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getTableData();
}

// 获取巡查问题下拉列表
const getXcQuestionList = async (type = '') => {
    const res = await ContentList({
        type: type
    });
    xcQuestionTypes.value = res.data?.map(item => {
        return {
            value: item.xcContentId,
            label: item.name
        }
    })
    console.log(res)
}

const getTableData = async () => {
    loading.value = true;
    const res = await getSendPoliceXcMainTableList(queryParams.value, paging.value);
    total.value = res.total
    tableData.value = res.rows
    loading.value = false;
}

// 巡查问题类型事件
const handleXcQuestionType = async (data) => {
    queryParams.value.xcContentId = ''
    await getXcQuestionList(data)
    await getTableData()
}
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }

    getTableData()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []

    queryParams.value.unitId = '';
    queryParams.value.njXcQuestionType = '';
    queryParams.value.xcContentId = '';
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.selChildren = false;
    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getTableData()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>